<template>
  <d2-container>
    <div class="mt-3 ml-2">
      <el-form :model="form" label-width="140px">
        <div style="width: 50%;">
          <el-form-item :label="form.distribution_status == false ? '分销启用' : '分销关闭'" prop="distribution_status">
            <el-switch v-model="form.distribution_status"></el-switch>
          </el-form-item>
        </div>
        <div style="width: 60%;">
          <el-form-item label="分销层级" prop="variant">
            <el-radio-group v-model="form.simplify_level">
              <el-radio :label="0">一级分销</el-radio>
              <el-radio :label="1">二级分销</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="font-s-1 text-light-muted tips">一级分销为上级享受返佣，二级分销为上级和上上级享受返佣</div>
        </div>
        <div class="mt-2" v-if="form.simplify_level == 1">
          <div class="d-f">
            <el-form-item label="一级佣金比例" prop="first_level">
              <div class="row-ac" style="width: 55%;">
                <el-input v-model="form.first_level"></el-input>
                <div class="ml-1">%</div>
              </div>
            </el-form-item>
            <el-form-item label="二级佣金比例" prop="secondary_level">
              <div class="row-ac" style="width: 55%;">
                <el-input v-model="form.secondary_level"></el-input>
                <div class="ml-1">%</div>
              </div>
            </el-form-item>
          </div>
          <div class="font-s-1 text-light-muted tips">一级分销为上级拿100%佣金，二级分销按设置的比例拿佣金</div>
        </div>
        <div class="mt-2">
          <el-form-item label="资金冻结时间(天)" prop="freeze_time">
            <el-input-number v-model="form.freeze_time" :min="0"></el-input-number>
          </el-form-item>
          <div class="font-s-1 text-light-muted tips">防止用户退款，一般设置为七天</div>
        </div>
        <div class="mt-2">
          <el-form-item label="最低提现金额" prop="draw_money">
            <el-input-number v-model="form.draw_money" :precision="2" :min="0" :step="0.01"></el-input-number>
          </el-form-item>
          <div class="font-s-1 text-light-muted tips">用户最低提现金额</div>
        </div>
        <div class="mt-2">
          <el-form-item label="提现手续费" prop="commission">
            <div class="row-ac" style="width: 15%;">
              <el-input v-model="form.commission"></el-input>
              <div class="ml-1">%</div>
            </div>
          </el-form-item>
          <div class="font-s-1 text-light-muted tips">手续费按提现金额百分比计算</div>
        </div>
        <div class="mt-2">
          <el-form-item label="银行卡提现" prop="is_bank">
            <el-switch v-model="form.is_bank"></el-switch>
          </el-form-item>
        </div>
        <div class="mt-2">
          <el-form-item label="微信提现" prop="is_wechat">
            <el-switch v-model="form.is_wechat"></el-switch>
          </el-form-item>
        </div>
        <div class="mt-2">
          <el-form-item label="支付宝提现" prop="is_alipay">
            <el-switch v-model="form.is_alipay"></el-switch>
          </el-form-item>
        </div>
        <div style="margin-top: 85px;">
          <el-form-item>
            <el-button type="primary" @click="submitForm">保存</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </d2-container>
</template>

<script>
  import {
    distributorssettingsDetailUrl,
    distributorssettingsUpdateUrl,
  } from '@/utils/distribution'
  export default {
    data() {
      return {
        form: {
          distribution_status: false,
          simplify_level: 0,
          first_level: 85,
          secondary_level: 15,
          freeze_time: 1,
          draw_money: 1,
          commission: 0,
          is_bank: false,
          is_wechat: false,
          is_alipay: false,
        }
      }
    },
    created() {
      this.getDistributorssettingsDetai()
    },
    methods: {
      getDistributorssettingsDetai() {
        this.$get(distributorssettingsDetailUrl + 1 + '/').then(res => {
          if (res.data.code == 200) {
            this.form = {
              distribution_status: res.data.data.distribution_status,
              simplify_level: res.data.data.simplify_level,
              freeze_time: res.data.data.freeze_time,
              draw_money: res.data.data.draw_money,
              commission: res.data.data.commission,
              is_bank: res.data.data.is_bank,
              is_wechat: res.data.data.is_wechat,
              is_alipay: res.data.data.is_alipay,
              first_level: res.data.data.first_level,
              secondary_level: res.data.data.secondary_level
            }
          }
        })
      },
      submitForm() {
        this.$put(distributorssettingsUpdateUrl + 1 + '/', this.form).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '保存成功'
            });
          }
        })
      },
      resetForm(){
        this.getDistributorssettingsDetai()
      }
    }
  }
</script>

<style>
  .el-form-item {
    margin-bottom: 10px;
  }

  .tips {
    margin-left: 140px;
  }
</style>
